<template>
	<view class="detail">
		<view class="fixbg" :style="{'background-image':'url('+detaillist.al.picUrl+')'   }"></view>
		<musichead :title="detaillist.name" color="white" :icon="true"></musichead>

		<view class="container" v-show="!isloding">
			<scroll-view scroll-y="true">
				<view class="detail-play" @tap="handletoplay">
					<view class="detail-play2">
						<image :src="detaillist.al.picUrl" :class="{'detail-play2-run': isolayrotate}" mode=""></image>
						<text class="iconfont ":class="iconPlay"></text>
						<view></view>
					</view>
				</view>

				<view class="detail-lyric">		<!-- //transform :'translateY('+ -(lyricindex -1)*82 +'rpx') -->
					<view class="detail-lyric-wrap" :style="{transform :'translateY('+ -(lyricindex -1)*82 +'rpx)' }">
						<view class="detail-lyric-item" :class="{active :  lyricindex== index}" v-for="(item,index) in lyric" :key = "index">{{item.lyric}}</view>
	<!-- 					<view class="detail-lyric-item active">测试文字测试</view>
						<view class="detail-lyric-item">测试测试</view> -->
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import musichead from "../../components/musichead/musichead.vue"
	import {
		songdetail,
		songlyric,
		songurl
	} from "../../common/api.js"
	export default {
		data() {
			return {
				isloding: true,
				detaillist: {},
				lyric:null,
				lyricindex:0,
				iconPlay:"icon-zanting",
				isolayrotate:true
			}
		},
		onLoad(o) {
			// songdetail(o.id).then(res =>{
			// 	this.detaillist = res[1].data.songs[0]
			// 	console.log(this.detaillist)
			// 	setTimeout(()=>{this.isloding=false},1000)
			// })
			// /\[([^\]]+)\]([^\[]+)/g
			
			uni.showLoading({
				title: '加载中'
			});
			this.getmusic(o.id)
		},
		onUnload() {
			this.cleartime()
			// this.bgm = null
		},
		onHide() {
			this.cleartime()
			// this.bgm = null
		},
		methods: {
			listenlyricindex(){
				clearInterval(this.timer)
				this.timer = setInterval(()=>{
					for(var i = 0;i<this.lyric.length;i++){
						if(this.bgm.currentTime>this.lyric[this.lyric.length-1].time){
							this.lyricindex = this.lyric.length-1
							break
						}
						if(this.bgm.currentTime>this.lyric[i].time && this.bgm.currentTime<this.lyric[i+1].time){
							this.lyricindex = i
						}
					}
					
					console.log(this.lyricindex);
				},500)
			},
			cleartime(){
				clearInterval(this.timer)
			},
			handletoplay(){
				if(this.bgm.paused){
					this.bgm.play()
				}else{
					this.bgm.pause()
				}
			},
			formattimetosec(value){
				let arr = value.split(":")
				return (Number(arr[0]*60)  + Number(arr[1])).toFixed(1)
			},
			// newbgm(){
			// 	const bgm = uni.getBackgroundAudioManager();
			// 	bgm.title = '致爱丽丝';
			// 	bgm.src = "http://m701.music.126.net/20220315222454/5896f5cb480406767e7b77221cadf93c/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/13348797524/3a7b/dd98/fbc2/3807bd709fa6524148850cc63a80ba08.mp3"
			// 	return bgm
			// },
			getmusic(id) {
				
				
				this.isloding = true
				Promise.all([songdetail(id), songlyric(id),songurl(id)]).then(res => {
					console.log(res)
					this.detaillist = res[0][1].data.songs[0]
					this.lyric = res[1][1].data.lrc.lyric
					let re = /\[([^\]]+)\]([^\[]+)/g
					var result = []
					this.lyric.replace(re,($0,$1,$2)=>{
						result.push({"time":this.formattimetosec($1),"lyric":$2})
					})
					this.lyric = result
					setTimeout(()=>{this.isloding=false},1000)
					this.bgm = uni.getBackgroundAudioManager();
					this.bgm.title = this.detaillist.name
					this.bgm.src = 	res[2][1].data.data[0].url || ''
					this.listenlyricindex()
					this.bgm.onPlay(()=>{
						this.listenlyricindex()
						this.iconPlay ='icon-zanting'
						this.isolayrotate=true
					})
					this.bgm.onPause(()=>{
						this.iconPlay ='icon-bofang'
						this.isolayrotate=false
						this.cleartime()
					})
					
					
					this.isloding = false
					uni.hideLoading()
					
				})
			},
		}
	}
</script>

<style scoped>
	.detail-play {
		width: 580rpx;
		height: 580rpx;
		margin: 214rpx auto 0 auto;
		background-color: #000000;
		border-radius: 50%;
		box-shadow: 0 0 25rpx 15rpx rgba(0, 0, 0, 0.4);
	}

	.detail-play2 {
		width: 480rpx;
		height: 480rpx;
		background-color: white;
		border-radius: 50%;
		transform: translate(10%, 10%);
		position: relative;
	}

	.detail-play2 image {
		width: 480rpx;
		height: 480rpxrpx;
		border-radius: 50%;
		animation: 10s linear move infinite;
		animation-play-state: paused;
	}
	
	
	.detail-play2 .detail-play2-run{
		animation-play-state: running;
	}
	@keyframes move{
		from{transform: rotate(0deg);}
		to{transform: rotate(360deg);}
	}

	.detail-play2 text {
		font-size: 100rpx;
		color: white;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: block;
	}

	.detail-lyric {
		font-size: 32rpx;
		line-height: 82rpx;
		height: 656rpx;
		text-align: center;
		overflow: hidden;
		color: #6f6e73
	}
	
	.detail-lyric-wrap{
		transition: .5s;
	}

	.detail-lyric-item {
		height: 82rpx;
		overflow: hidden;
	}

	.detail-lyric-item.active {
		color: white;
	}
</style>
